<template>
  <div class="container">
    <el-rate v-model="rate" />
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import type { ICellRendererParams } from 'ag-grid-community'
import type { IOlympicData } from '@/views/types'

const props = defineProps<{
  params: ICellRendererParams<IOlympicData, IOlympicData['rate']> & { rowData: IOlympicData[] }
}>()

// 初始化数据
const rate = ref<number>(Number(props.params.valueFormatted || props.params.value || ''))

watchEffect(() => {
  props.params.setValue?.(rate.value)
})
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>
